<template>
  <div class="appWrapper">
    <div class="sidebarContainer">
      <SideBar></SideBar>
    </div>
    <div class="mainContainer">
      <div class="header" :style="{ height: autoHeight }">
        <NavBar @settingTheme="handleSettingTheme"></NavBar>
        <TagsView v-if="settingStore.otherSettings.isShowTagsView"></TagsView>
      </div>
      <!-- <div class="appMain"> -->
      <appMain></appMain>
      <!-- </div> -->
    </div>

    <ThemeDrawer v-model="themeDrawerVisible" direction="rtl" title="设置">
      <Settings></Settings>
    </ThemeDrawer>
  </div>
</template>

<script setup lang="ts" name="Layout">
import { useSettingStore } from "@/store/setting"
import variables from "@/style/variables.module.scss"

const settingStore = useSettingStore()
const themeDrawerVisible = ref(false)
const handleSettingTheme = () => {
  themeDrawerVisible.value = true
}

const autoHeight = computed(() => {
  return (
    (settingStore.otherSettings.isShowTagsView
      ? parseInt(variables.tagsViewHeight) + parseInt(variables.navBarHeight)
      : parseInt(variables.navBarHeight)) + "px"
  )
})
</script>

<style scoped lang="scss" name="Layout">
.appWrapper {
  @apply flex  w-full h-full;
  .sidebarContainer {
    // @apply bg-#418e6c;
    background-color: v-bind("settingStore.theme");
    :deep(.sidebarContainerMenu:not(.el-menu--collapse)) {
      @apply w-[210px];
    }
  }

  .mainContainer {
    @apply flex flex-col w-full overflow-hidden;

    .header {
      @apply h-[84px];
    }
  }
}
</style>
